<template>
  <el-tabs v-model="active" type="border-card">
    <el-tab-pane label="流转日志" name="log">
      <flowAuditLogItem :cur-id="curId" :link-pk="linkPk" :link-type="linkType" :logs="logs" />
    </el-tab-pane>
    <el-tab-pane v-if="isShowSign" name="signFile" label="签名文件">
      <flowSignFileList :log-id="logId" :is-load="active=='signFile'" />
    </el-tab-pane>
    <el-tab-pane label="流程图" name="img">
      <flowAuditNodeView :flow-id="flowId" :log-id="logId" :is-load="active=='img'" />
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import { GetAuditLog } from '@/flow/api/flowAudit'
import { AuditItemStatus } from '@/flow/config/flowConfig'
import flowAuditNodeView from '../preview/flowAuditNodeView.vue'
import flowAuditLogItem from './flowAuditLogItem.vue'
import flowSignFileList from './flowSignFileList.vue'
export default {
  components: {
    flowAuditNodeView,
    flowAuditLogItem,
    flowSignFileList
  },
  props: {
    logId: {
      type: String,
      default: null
    },
    curId: {
      type: String,
      default: null
    },
    isShowSign: {
      type: Boolean,
      default: false
    },
    isLoad: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      AuditItemStatus,
      logs: [],
      linkPk: null,
      linkType: null,
      flowId: null,
      active: 'log'
    }
  },
  computed: {
    comId() {
      return this.$store.getters.curComId
    }
  },
  watch: {
    isLoad: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    async reset() {
      this.active = 'log'
      const res = await GetAuditLog(this.logId)
      this.flowId = res.FlowId
      this.linkPk = res.LinkPk
      this.linkType = res.LinkType
      this.logs = res.Items
      this.$emit('load', res)
    }
  }
}
</script>

